<cfset mySelf = viewState.getValue("mySelf") />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>

<script type="text/javascript">
	var djConfig = {isDebug: true,
		debugContainerId : "resourceHistory" };
</script>
<!---
 <script type="text/javascript" src="/inc/dojo/dojo.js"></script>
 --->
<script type="text/javascript" src="/srvinc/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require("dojo.widget.LayoutContainer");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.SplitContainer");
	dojo.require("dojo.widget.ColorPalette");
	dojo.require("dojo.widget.TabContainer");
//	dojo.require("dojo.lfx.rounded");
	dojo.hostenv.writeIncludes();
<cfoutput>
	function setTabUrl(theTab,theUrl) {
		var docPane = dojo.widget.getWidgetById(theTab);
		var tabCont= dojo.widget.getWidgetById("mainTabContainerPane");				
		docPane.setUrl(theUrl);
		tabCont.selectChild(docPane);
	}
	
	function addTab(container, tabid, title, eventUrl, selected) {
		var tabPane = dojo.widget.byId(container);
		if (!dojo.widget.byId(tabid)) {
		  var tabProps = {id: tabid, href: eventUrl ,refreshOnShow: "false", label: title, executeScripts:"true",scriptSeperation:"true",closable:"true"};
	  	var tab = dojo.widget.createWidget("LinkPane", tabProps);
			tabPane.addChild(tab);
		} 
		else {
			var tab = dojo.widget.byId(tabid);
			tab.setUrl(eventUrl);
		}
		if (selected) {
			tabPane.selectChild(tab);
		}
		//window.location.hash = eventUrl.split("?")[1];
	 }

	function loadResource(resourceAndRevision) {
		if(resourceAndRevision){
			var daUrl = resourceAndRevision.split("=")[1];
			//alert(resourceAndRevision);
			//dojo.widget.byId('resource').setUrl('#myself#repo.resource.view&resourceUrl='+resourceAndRevision);
			addTab('mainTabContainerPane', daUrl, daUrl, '#myself#repo.resource.view&resourceUrl='+resourceAndRevision, true);
			dojo.widget.byId('resourceHistoryPane').setUrl('#myself#repo.resource.history.view&resourceUrl='+resourceAndRevision);
		}
		return false;
	}

	function replaceTabLabel(oldLabel,newLabel) {
    var tabWidget=dojo.widget.byId("mainTabContainerPane");
    var buttons=tabWidget.tablist.children;
    for (var n=0; n<buttons.length; n++) {
       var button=buttons[n];
       var node=button.domNode;
       if (dojo.dom.textContent(node) == oldLabel) {
        //node.id="tabLabel"+dojo.dom.textContent(node);
        node.innerHTML = node.innerHTML.replace('>'+oldLabel+'<','>'+newLabel+'<');
       }
    } 
	}


/*
 	dojo.addOnLoad(function(){
		dojo.lfx.rounded({
				tl:{ radius:10 },
				bl:{ radius:10 },
				tr:{ radius:10 },
				br:{ radius:10 }
			}, 
			["resourceHistory","topBar","bottomBar"]
		);});
 */
</cfoutput>
</script>
  <style>
    html, body{	
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		font-family:Arial;
    }
	.dojoSplitPane{
		margin: 5px;
	}
	#rightPane {
		margin: 0;
	}

.rounders {
	border:1px solid #ccc;
	padding:5px;
	margin-top:5px;
	margin-bottom:5px;
}

div.dojoSplitContainerSizerH,
div.dojoSplitContainerSizerV {
	font-size: 1px;
	background-color: #ffffff;
	border: 1px solid;
	border-color: #ffffff;
	margin: 0;
}
.list { border: 1px solid #999; }
.list th, .list td { padding: 2px; }
.list th, .list tfoot tr { background-color: #ddd; }
.list .smokin { color: #f00; }
.list .hot { color: #c00; }
.list .fresh { color: #c80; }
.list .fine { color: #440; }
.list .aged { color: #666; }
.even { background-color: #eee; }
.diff { font-family: 'Bitstream Vera Sans Mono', 'Bitstream Vera Mono', 'Vera Mono', 'Vera Sans Mono', 'Lucida Console', 'Lucida Typewriter', monospace, fixed-width, fixed; font-size: 0.9em; }
.diff .ins { background-color: #dfd; }
.diff .del { background-color: #fdd; }
.diff .upd { background-color: #ddf; }
.diff .code { width: 50%; }
.diff .code div { overflow: hidden; }
.diff td, .diff tr { vertical-align: top; }
.diff .linenum { font-size: 0.8em; background-color: #eee; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-align: right; color: #999; }
.diff th { background-color: #eee; border: 1px solid #ddd; border-left: none; }
.diff .top td, .diff .whole td { border-top: 2px solid #999; margin-top: 1em; }
.diff .bottom td, .diff .whole td { border-bottom: 2px solid #999; margin-bottom: 1em; }
.diff .only td { border-top: none; border-bottom: none; margin-top: auto; margin-bottom: auto; }
a { color: blue; }
.num { text-align: right; }
.date { text-align: center; }

<!---

 div.dojoMenuBar2 {
	width:80%;
	float:right;
}
 --->
</style>
</head>
<body>
<div dojoType="LayoutContainer"
	layoutChildPriority='top-bottom'
	style="width: 100%; height: 100%;">
	<div dojoType="ContentPane" layoutAlign="top" style="padding-bottom:5px;">
		<div dojoType="ContentPane" id="topBar" layoutAlign="top" style="background-color: #274383; color: white;" class="rounders">
				<strong style="float:left; padding:0px 5px 0px 5px;color:black;"> cfsvn repository browser </strong>
				<div dojoType="MenuBar2">
					<div dojoType="MenuBarItem2" caption="Repository" submenuId="taskMenu"></div>
					<div dojoType="MenuBarItem2" caption="Resource" submenuId="projectMenu"></div>
					<div dojoType="MenuBarItem2" caption="Configuration" submenuId="configMenu"></div>
				</div>
				<div dojoType="PopupMenu2" widgetId="taskMenu">
					<div dojoType="MenuItem2" caption="Tasks" onClick="setMainPane('#myself#projecttasks.allinwonder');"></div>
					<div dojoType="MenuItem2" caption="Task Times" onClick="setMainPane('#myself#projecttasktime.allinwonder');"></div>
					<div dojoType="MenuItem2" caption="Time Totals" onClick="setMainPane('#myself#project.timesTotals');"></div>
					<div dojoType="MenuItem2" caption="Disabled Item" disabled="true"></div>
					<div dojoType="MenuSeparator2"></div>
					<div dojoType="MenuItem2" caption="Enabled Submenu" submenuId="projectMenu"></div>
					<div dojoType="MenuItem2" caption="Disabled Submenu" submenuId="projectMenu" disabled="true"></div>
				</div>
				
				<div dojoType="PopupMenu2" widgetId="projectMenu">
					<div dojoType="MenuItem2" caption="Projects" onClick="setMainPane('<cfoutput>#myself#</cfoutput>projects.allinwonder');"></div>
					<div dojoType="MenuItem2" caption="Submenu Item Two" onClick="alert('Submenu 2!')"></div>
				</div>

				<div dojoType="PopupMenu2" widgetId="configMenu">
					<div dojoType="MenuItem2" caption="Project" submenuId="configureProjectMenu"></div>
					<div dojoType="MenuItem2" caption="Issues" submenuId="configureIssueMenu"></div>
					<div dojoType="MenuItem2" caption="Add Defaults" onClick="setMainPane('<cfoutput>#myself#</cfoutput>project.setConfigDefaults')"></div>
				</div>
		</div>
	</div>
	<div dojoType="ContentPane" id="bottomBar" layoutAlign="bottom" style="background-color: #274383; color: white;" class="rounders">
		bottom bar
	</div>
	<div dojoType="SplitContainer"
		orientation="horizontal"
		sizerWidth="5"
		activeSizing="0"
		layoutAlign="client"
	>
			<div dojoType="LinkPane" id="repoTree" href="<cfoutput>#myself#repoTree</cfoutput>" executeScripts="true" scriptSeparation="true" >
			</div>

		<div dojoType="SplitContainer"
			id="rightPane"
			orientation="vertical"
			sizerWidth="5"
			activeSizing="0"
			sizeMin="50" sizeShare="80"
		>
			<div id="mainTabContainerPane" dojoType="TabContainer" sizeMin="20" sizeShare="70">			
 				<div id="detailsPane" dojoType="ContentPane" label="Details">
				</div>
			</div>

			<div dojoType="ContentPane" id="resourceHistoryPane" sizeMin="20" sizeShare="30" cacheContent="false" style="font-size:.8em;" class="rounders" executeScripts="true">
				This is just a test of the various containers nested inside each other.
			</div>
		</div>
	</div>
</div>
</body>
</html>
	